<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 100px"
          class="filter-item"
        />
        <el-input
          v-model="filter.studentId"
          placeholder="学生学号"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-input
          v-model="filter.studentName"
          placeholder="学生姓名"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="handleReset">重置</el-button>
      </div>
  
      <!-- 数据表格 -->
      <el-table
      :data="tableData"

      style="width: 100%"
      header-row-class-name="table-header"
      >
      <el-table-column prop="id" label="编号" width="80" align="center"/>
      <el-table-column prop="name" label="名称"  width="120"/>
      <el-table-column prop="requirement" label="申请要求" width="120"/>
      <el-table-column prop="company" label="实习单位" width="150"/>
      <el-table-column prop="studentId" label="学生学号" width="120" align="center"/>
      <el-table-column prop="studentName" label="学生姓名" width="120"/>
      <el-table-column prop="status" label="审核状态" width="120" align="center">
      <template slot-scope="scope">
      <el-tag type="success" size="small">{{ scope.row.status }}</el-tag>
      </template>
      </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button type="text" style="color: #67C23A" @click="showDetail(scope.row)">
              <span style="font-size: 14px">✔</span> 详细
            </el-button>
            <el-button 
              type="text" 
              style="color: #409EFF; margin: 0 5px" 
              @click="handleApprove(scope.row)"
            >
              <span style="font-size: 14px">✔</span> 同意
            </el-button>
            <el-button 
              type="text" 
              style="color: #F56C6C" 
              @click="handleReject(scope.row)"
            >
              <span style="font-size: 14px">✘</span> 拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页信息 -->
      <div class="pagination-info">
        第 1 页，共 {{ tableData.length }} 条记录。
      </div>
    </el-card>
  
    <!-- 详情对话框 -->
    <el-dialog
      title="申请详情"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="编号">{{ selectedRow.id }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ selectedRow.name }}</el-descriptions-item>
        <el-descriptions-item label="申请要求">{{ selectedRow.requirement }}</el-descriptions-item>
        <el-descriptions-item label="实习单位">{{ selectedRow.company }}</el-descriptions-item>
        <el-descriptions-item label="学生学号">{{ selectedRow.studentId }}</el-descriptions-item>
        <el-descriptions-item label="学生姓名">{{ selectedRow.studentName }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusTagType" size="small">{{ selectedRow.status }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        filter: {
          id: '',
          studentId: '',
          studentName: '',
        },
        originalTableData: [], // 保存原始数据用于重置
        tableData: [],
        dialogVisible: false,
        selectedRow: {}
      }
    },
    computed: {
      statusTagType() {
        return this.selectedRow.status === '通过' ? 'success' : 'danger'
      }
    },
    created() {
      // 初始化原始数据
      this.originalTableData = [
        { id: 11, name: '顶岗实习', requirement: '123', company: '1', studentId: '1', studentName: '冯停', status: '通过' },
        { id: 12, name: '顶岗实习', requirement: '7', company: '1', studentId: '1', studentName: '冯停', status: '通过' },
        { id: 13, name: '顶岗实习', requirement: '无挂科', company: '360', studentId: '48', studentName: '王旭', status: '通过' },
        { id: 14, name: '顶岗实习', requirement: '无挂科', company: '1', studentId: '48', studentName: '王旭', status: '通过' },
        { id: 15, name: '顶岗实习', requirement: '无挂科', company: '北京某公司', studentId: '48', studentName: '王旭', status: '通过' }
      ]
      this.tableData = [...this.originalTableData]
    },
    methods: {
      // 搜索功能
      handleSearch() {
        this.tableData = this.originalTableData.filter(item => {
          return (!this.filter.id || item.id == this.filter.id) &&
                 (!this.filter.studentId || item.studentId.includes(this.filter.studentId)) &&
                 (!this.filter.studentName || item.studentName.includes(this.filter.studentName))
        })
      },
      // 重置功能
      handleReset() {
        this.filter = {
          id: '',
          studentId: '',
          studentName: '',
        }
        this.tableData = [...this.originalTableData]
      },
      // 显示详情
      showDetail(row) {
        this.selectedRow = { ...row }
        this.dialogVisible = true
      },
      // 同意申请
      handleApprove(row) {
        this.$confirm('确定要同意该申请吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.status = '通过'
          this.$message.success('已同意申请')
        })
      },
      // 拒绝申请
      handleReject(row) {
        this.$confirm('确定要拒绝该申请吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.status = '拒绝'
          this.$message.success('已拒绝申请')
        })
      }
    }
  }
  </script>
  
  <!-- 样式保持不变 -->